home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2017 October / PCgo 10-2017 CD-ROM Germany.iso / nw.pak / Unnamed File 000170.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  3.5 KB  |  97 lines
  1. <!--
  2. Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  3. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4. The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5. The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6. Code distributed by Google as part of the polymer project is also
  7. subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8. --><html><head><link href="core-transition-pages.html" rel="import">
  9.  
  10. </head><body><core-style id="hero-transition">
  11.   /* Hide heroes that are not currently transitioning */
  12.   polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; }
  13.   ::content > [animate]:not(.core-selected) /deep/ [hero] {
  14.     opacity: 0;
  15.   }
  16.  
  17.   polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
  18.   ::content > .core-selected[animate] /deep/ [hero] {
  19.     opacity: 1;
  20.     z-index: 10000;
  21.   }
  22.  
  23.   polyfill-next-selector { content: ':host > * [hero-p]'; }
  24.   ::content > * /deep/ [hero-p] {
  25.     -webkit-transition: box-shadow 100ms ease-out;
  26.     transition: box-shadow 100ms ease-out;
  27.   }
  28.  
  29.   polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
  30.   ::content > [animate] /deep/ [hero-p] {
  31.     box-shadow: none !important;
  32.   }
  33. </core-style>
  34.  
  35.  
  36. <!--
  37.  
  38. `hero-transition` transforms two elements in different pages such that they appear
  39. to be shared across the pages.
  40.  
  41. Example:
  42.  
  43.     <core-animated-pages transition="hero-transition">
  44.       <section layout horizontal>
  45.         <div id="div1" flex></div>
  46.         <div id="div2" flex hero-id="shared" hero></div>
  47.       </section>
  48.       <section>
  49.       <section layout horizontal>
  50.         <div id="div3" flex hero-id="shared" hero></div>
  51.         <div id="div4" flex></div>
  52.       </section>
  53.       </section>
  54.     </core-animated-pages>
  55.  
  56. In the above example, the elements `#div2` and `#div3` shares the same `hero-id`
  57. attribute and a single element appears to translate and scale smoothly between
  58. the two positions during a page transition.
  59.  
  60. Both elements from the source and destination pages must share the same `hero-id`
  61. and must both contain the `hero` attribute to trigger the transition. The separate
  62. `hero` attribute allows you to use binding to configure the transition:
  63.  
  64. Example:
  65.  
  66.     <core-animated-pages transition="hero-transition">
  67.       <section layout horizontal>
  68.         <div id="div1" flex hero-id="shared" hero?="{{selected == 0}}"></div>
  69.         <div id="div2" flex hero-id="shared" hero?="{{selected == 1}}"></div>
  70.       </section>
  71.       <section>
  72.       <section layout horizontal>
  73.         <div id="div3" flex hero-id="shared" hero></div>
  74.       </section>
  75.       </section>
  76.     </core-animated-pages>
  77.  
  78. In the above example, either `#div1` or `#div2` scales to `#div3` during a page transition,
  79. depending on the value of `selected`.
  80.  
  81. Because it is common to share elements with different `border-radius` values, by default
  82. this transition will also animate the `border-radius` property.
  83.  
  84. You can configure the duration of the hero transition with the global variable
  85. `CoreStyle.g.transitions.heroDuration`.
  86.  
  87. @class hero-transition
  88. @extends core-transition-pages
  89. @status beta
  90. @homepage github.io
  91. -->
  92. <polymer-element name="hero-transition" extends="core-transition-pages" assetpath="">
  93.  
  94. </polymer-element>
  95.  
  96. <hero-transition id="hero-transition"></hero-transition>
  97. <script src="hero-transition-extracted.js"></script></body></html>